<template>
  <div class="image-list">
      <div class="btns">
        <el-radio-group
          v-model="tabPosition"
          style="margin-bottom: 30px"
          size="mini"
        >
          <el-radio-button label="all" @click.native="clickAll"
            >全部</el-radio-button
          >
          <el-radio-button label="collect" @click.native="clickCollect"
            >收藏</el-radio-button
          >
        </el-radio-group>
        <!-- <div class="left">
          <el-button type="success" size="mini" @click="uploadImage"
            >上传图片</el-button
          >
        </div> -->
      </div>

      <div class="img_list">
        <el-row v-loading="isLoading">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
            v-for="(ele, i) in images"
            :key="i"
            ><div class="grid-content">
              <div class="block" @click="selected =i">
                <el-image
                  :src="ele.url"
                 
                  fit="cover"
                ></el-image>
               <checked-status v-if="selected === i"></checked-status>
               <!--  <div class="collect">
                  <i
                    :class="[
                      'el-icon-star-on',
                      { 'el-color': ele.is_collected },
                    ]"

                    @click="addCollect(ele.id,ele.is_collected)"
                  ></i>

                  <i class="el-icon-delete-solid"
                  @click="deleteImage(i)"
                  ></i> -->

                  <!-- <el-button
                    type="warning"
                    :icon="
                      ele.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'
                    "
                    circle
                    :loading="ele.is_loading"
                    @click="addCollect(i, ele.id, ele.is_collected)"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deleteImage(ele.id)"
                  ></el-button> 
                </div>-->

                
              </div>
            </div>
          </el-col>
        </el-row>

        <el-pagination
          background
          layout="prev, pager, next"
          :total="total_count"
          :page-size="per_page"
          :current-page="page"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>

      <el-dialog :visible.sync="dialogFormVisible" :append-to-body="true">
        <el-upload
          class="upload-demo"
          drag
          action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
          multiple
          :headers="uploadHeaders"
          name="image"
          :on-success="loadsuccess"
          :on-error="loadfail"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-dialog>
  </div>
</template>

<script>
import { getImages } from "@/request/api.js";
import { collectImages } from "@/request/api.js";
import { deleteImages } from "@/request/api.js";
import CheckedStatus from "./CheckedStatus.vue"
export default {
  name: "MyImage",
  data() {
    let user = JSON.parse(window.localStorage.getItem("user"));
    return {
      tabPosition: "all",
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      images: [],
      imgs: [],
      page: 1,
      total_count: 0,
      per_page: 12,
      collect: false,
      isLoading: false,
      dialogFormVisible: false,
      uploadHeaders: {
        Authorization: "Bearer " + user.token,
      },
      btnLoading: false,
      selected:null
    };
  },
  components:{
      CheckedStatus
  },
  watch: {
    //   collect(){
    //       this.initImages()
    //   }
  },
  created() {
    this.initImages();
  },
  methods: {
    initImages() {
      this.isLoading = true;
      getImages({
        page: this.page,
        per_page: this.per_page,
        collect: this.collect,
      }).then((res) => {
        // console.log("我的素材", res.data);
        this.total_count = res.data.data.total_count;
        this.images = res.data.data.results;
        res.data.data.results.some((item) => {
          item.status = false;
        });

        res.data.data.results.forEach((item) => {
          this.imgs.push(item.url);
        });
        this.isLoading = false;
      });
    },

    clickStatus(ele){
       
       this.images.some(item=>{
           if(item.id == ele.id){
               item.status = !ele.status
               console.log('element',item.status)
               return
           }
       })


    },

    currentChange(current) {
        this.selected = null
      this.page = current;
      this.initImages();
    },

    clickAll() {
      this.page = 1;
      this.collect = false;
      this.initImages();
    },

    clickCollect() {
      this.page = 1;
      this.collect = true;
      this.initImages();
    },

    uploadImage() {
      this.dialogFormVisible = true;
    },

    loadsuccess() {
      this.$message({
        message: "图片上传成功",
        type: "success",
      });

      this.tabPosition = "collect";
      this.dialogFormVisible = false;
      this.initImages();
    },
    loadfail() {
      this.$message.error("上传失败");
    },
    loading() {
      this.$message({
        showClose: true,
        message: "图片正在上传",
        type: "warning",
      });
    },
    async addCollect(index, id, is_collected) {
      this.images[index].is_loading = true;

      await collectImages(id, !is_collected);

      this.images[index].is_loading = false;
      this.images[index].is_collected = !is_collected;
      //     .then(() => {
      //       // this.btnLoading = false;
      //

      //     })
      //     .catch(() => {
      //     this.images[index].is_loading = false
      //     });
    },

    deleteImage(id) {
      deleteImages(id).then(res=>{
          console.log("删除成功",res)

          this.initImages()
      })
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-bottom: 15px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  padding: 0 10px;
  border-radius: 4px;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.row-bg {
  //   padding: 10px 0;
  background-color: #f9fafc;
}

.el-image {
  //   width: 100%;
  height: 150px;
  display: block;
}
.block {
  position: relative;
}
.collect {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 35px;
  background-color: rgba(0, 0, 0, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;
  color: #f9fafc;
  .el-button.is-circle {
    padding: 6px;
  }
}
.el-color {
  color: #e0b451;
}
.upload-demo {
  text-align: center;
}

</style>